<script setup>
defineOptions({
  dicts: ['job_group'],
});
import { ref } from 'vue';
import { UploadFilled, Plus } from '@element-plus/icons-vue';

const file = ref(null);
const image = ref(null);
const imageList = ref(null);
</script>

<template>
  <div class="page-container">
    <div class="page-body">
      <m-block-header title="字典mixins" />
      <ul>
        <li v-for="(item, index) in dict['job_groupDict'].values" :key="index">{{ item.label }} - {{ item.value }}</li>
      </ul>
      <m-block-header title="点击上传文件" />
      <upload-file v-model="file" upload-api="/api/upload/uploadFile" :multiple="true" :limit="3" :size-limit="1" tip="单个文件不超过1MB" />

      <m-block-header title="用户头像上传" />
      <upload-file v-model="image" upload-api="/api/upload/uploadFile" :show-file-list="false" :single-mode="true" accept="image/*" list-type="picture-card">
        <template #trigger>
          <img v-if="image" :src="image" alt="" class="avatar" />
          <el-icon v-else><Plus /></el-icon>
        </template>
      </upload-file>

      <m-block-header title="文件缩略图" />
      <upload-file v-model="imageList" upload-api="/api/upload/uploadFile" :multiple="true" accept="image/*" :limit="10" list-type="picture-card">
        <template #trigger>
          <el-icon><Plus /></el-icon>
        </template>
      </upload-file>

      <m-block-header title="上传文件列表控制" />
      <upload-file v-model="file" upload-api="/api/upload/uploadFile" :multiple="true" :limit="10" tip="单个文件不超过10MB" list-type="picture" />

      <m-block-header title="拖拽上传" />
      <upload-file v-model="file" upload-api="/api/upload/uploadFile" :multiple="true" :limit="10" tip="单个文件不超过10MB" drag>
        <template #trigger>
          <el-icon size="67" color="var(--el-text-color-placeholder)"><UploadFilled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </template>
      </upload-file>

      <m-block-header title="单文件上传" />
      <upload-file v-model="file" upload-api="/api/upload/uploadFile" :single-mode="true" :limit="10" tip="单个文件不超过10MB" />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
